<template>
  <div class="LoginPanel">
    <h1 class="title">后台管理系统</h1>
    <el-tabs class="tabs" type="border-card" stretch>
      <el-tab-pane label="账号登录">
        <LoginAccount ref="Account" />
      </el-tab-pane>
      <el-tab-pane label="手机登录">
        <LoginPhone />
      </el-tab-pane>
    </el-tabs>
    <div class="account-control">
      <el-checkbox v-model="remember" label="记住密码" size="large" />
      <el-link type="primary" :underline="false">忘记密码</el-link>
    </div>
    <div>
      <el-button class="button_login" type="primary" @click="AccountLogin"
        >登录</el-button
      >
    </div>
  </div>
</template>

<script lang="ts">
import LoginAccount from "./login-account.vue";
import LoginPhone from "./login-phone.vue";
import { defineComponent, ref } from "vue";
export default defineComponent ({
  name: "LoginPanel",
  components: {
    LoginAccount,
    LoginPhone,
  } ,
  setup() {
    const remember = ref(false);
    const Account = ref<InstanceType<typeof LoginAccount>>()
    const AccountLogin = () => {
      // console.log('点击之后' );
      //  ?. 是进行判断，里面的东西是否存在，如果存在则继续执行，value有值的时候，进行下一步操作
      Account.value?.loginAction(remember.value)
  }
    return { remember,AccountLogin ,Account};
  },
  
});
</script>

<style lang="less" scoped>
.LoginPanel {
  width: 400px;
  margin-bottom: 150px;
  .title {
    text-align: center;
  }
  .account-control {
    display: flex;
    justify-content: space-between;
  }
  .button_login {
    width: 100%;
    height: 40px;
    margin-top: 18px;
  }
}
</style>
